<template>
  <div class="wrapper">
    <div>
      <el-tabs
        id="waybill_detail_menu"
        @tab-click="handleTabClick"
        type="border-card"
        class="step-tab"
        v-model="activeName"
      >
        <el-tab-pane label="运单流程" name="0"> </el-tab-pane>
        <el-tab-pane label="运单信息" name="1"> </el-tab-pane>
        <el-tab-pane
          label="运单跟踪"
          name="2"
          v-if="isHavePermission('waybill_logistics_list')"
        >
        </el-tab-pane>
        <el-tab-pane
          label="轨迹跟踪"
          name="3"
          v-if="isHavePermission('reportGps_list')"
        >
        </el-tab-pane>
        <el-tab-pane
          label="温度跟踪"
          name="4"
          v-if="isHavePermission('reportdata_reportmanage_print')"
        >
        </el-tab-pane>
        <el-tab-pane
          label="节点管理"
          name="5"
          v-if="isHavePermission('order_trajectory_detail')"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- origin 运单跟踪使用 -->
    <component
      :is="currentView"
      origin="waybill"
      :id="id"
      :class="{ 'info-wrap': this.activeName === '1' }"
    ></component>
  </div>
</template>

<script>
import {
  WaybillProcess,
  WaybillMessage,
  WaybillTrack,
  WaybillMap,
  TemperatureData,
  logisticsManage,
} from "./components";
import { isHavePermission } from "@/utils/mUtils";
import { sendClickTracker } from "@/utils/tracker";

export default {
  name: "waybillDetail",
  components: {
    WaybillProcess,
    WaybillMessage,
    WaybillTrack,
    WaybillMap,
    TemperatureData,
    logisticsManage,
  },
  props: [],
  data() {
    return {
      id: "",
      activeName: "0",
      viewArr: [
        "WaybillProcess",
        "WaybillMessage",
        "WaybillTrack",
        "WaybillMap",
        "TemperatureData",
        "logisticsManage",
      ],
    };
  },
  computed: {
    currentView() {
      // console.log()
      return this.viewArr[this.activeName];
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.activeName = this.$route.query.activeName;
  },

  mounted() {},
  methods: {
    isHavePermission(val) {
      return isHavePermission(val);
    },
    handleTabClick() {
      const codes = ["P4-38", "P4-39", "P4-40", "P4-41", "P4-42", "P4-43"];
      sendClickTracker(codes[this.activeName]);
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  background: white;
}

/deep/.step-tab.el-tabs--border-card {
  border: none;
  box-shadow: none;
}
.waybiill {
  margin: 0px 10px 0px 30px;
}
// 运单信息
.info-wrap {
  padding: 15px;
  padding-top: 0px;
  margin-top: -15px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: -50px;
}
</style>
